@mixin button-size($padding-vertical,$padding-horizonal,$font-size,$line-height,$border-radius){
  padding: $padding-vertical $padding-horizonal;
  font-size: $font-size;
  line-height:$line-height;
  border-radius: $border-radius;
}
@mixin button-plain($color){
  color: $color;
  background: mix($--color-white, $color, 90%);
  border-color: mix($--color-white, $color, 60%);
  &.x-btn-disabled {
    color: mix($--color-white, $color, 40%);
    background-color: mix($--color-white, $color, 90%);
    border-color: mix($--color-white, $color, 80%);
  }
}
@mixin button-variant($background-color){
  color: $--color-white;
  background-color: $background-color;
  border-color:  $background-color;
  &.x-btn-disabled {
    color: $--color-white;
    background-color: mix($background-color, $--color-white);
    border-color: mix( $background-color, $--color-white);
  }
}

.x-btn{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $button-background-color;
  border: $button-border;
  color: $button-color;
  outline: none;
  @include button-size($padding-vertical,$padding-horizonal,$font-size,$line-height,$border-radius);
  &-success{
    @include button-variant($--color-success);
    &.x-btn-plain{
      @include button-plain($--color-success);
    }
  }
  &-primary{
    @include button-variant($--color-primary);
    &.x-btn-plain{
      @include button-plain($--color-primary);
    }
  }
  &-warning{
    @include button-variant($--color-warning);
    &.x-btn-plain{
      @include button-plain($--color-warning);
    }
  }
  &-danger{
    @include button-variant($--color-danger);
    &.x-btn-plain{
      @include button-plain($--color-danger);
    }
  }
  &-info{
    @include button-variant($--color-info);
    &.x-btn-plain{
      @include button-plain($--color-info);
    }
  }
  &-sm{
    @include button-size($padding-vertical-sm,$padding-horizonal-sm,$font-size-sm,$line-height-sm,$border-radius-sm);
  }
  &-lg{
    @include button-size($padding-vertical-lg,$padding-horizonal-lg,$font-size-lg,$line-height-lg,$border-radius-lg);
  }
  &-block{
    display: block;
    width: 100%;
    & ~ .x-btn-block{
      margin-top:5px;
    }
  }
  &-round{
    border-radius: 100px;
  }
  &-disabled{
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  }
}
.x-btn-group{
  .x-btn{
    float: left;
    &:first-child{
      border-right-color:rgba(255,255,255,.5);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child{
      border-left-color:rgba(255,255,255,.5);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:first-child):not(:last-child){
      border-left-color: rgba(255,255,255,.5);
      border-right-color: rgba(255,255,255,.5);
      border-radius:0;
    }
    &:not(:last-child){
      margin-right: -1px;
    }
  }
}